<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                console.log($("#d1"));
                console.log($(".c1"));
                console.log($("p"));
                console.log($("*").length);
                console.log($("#d1,p"));

                //后代关系
                console.log($("div .s1"));

                //父子关系
                console.log($("div > .s1"));

                //与div同级别的后面的h2元素
                console.log($("div ~ h2"));


                //与div同级别,紧邻在div后面的p元素
                console.log($("div + p"));

                console.log($("span[class='s1']"));

                // $("li:first").css("color","red");
                // $("li:last").css("color","green");

                // jQuery对象.css("样式名","样式值");
                // 选择索引值为偶数的元素，从 0 开始计数
                $("li:even").css("color","yellow");


                // 选择索引值为奇数的元素，从 0 开始计数
                $("li:odd").css("background","green");

            });
        </script>
    </head>
    <body>
        <h2>h2</h2>
        <div id="d1">d1</div>
        <div class="c1">cc1</div>
        <p>p1</p>
        <p>p2</p>
        <div>
            <span class="s1">s1</span>
        </div>
        <h2>h2</h2>
        <h2>h2</h2>
        <ul>
            <li>li01</li>
            <li>li02</li>
            <li>li03</li>
            <li>li04</li>
            <li>li05</li>
        </ul>
    </body>
</html>